import streamlit as st

# 设置页面标题
st.title("霹雳舞知识大全")

# 添加 CSS 样式以实现 Windows 11 风格
st.markdown(
    """
    <style>
    body {
        color: #ffffff;
        background-color: #0078D4; /* Windows 11 主题色 */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .container {
        background-color: #1B1B1B; /* 深色背景 */
        padding: 2rem;
        border-radius: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 90%;
        max-width: 600px;
    }
    .stTextInput, .stTextArea, .stButton > button {
        background-color: #323232 !important;
        color: #ffffff !important;
        border: none;
        border-radius: 10px;
        padding: 0.5rem 1rem;
    }
    .stTextInput > div > div > input, .stTextArea > div > textarea {
        border: 1px solid #444444 !important;
    }
    .stButton > button {
        border: 1px solid #444444 !important;
        transition: all 0.3s ease;
    }
    .stButton > button:hover {
        background-color: #444444 !important;
        border-color: #555555 !important;
    }
    </style>
    """,
    unsafe_allow_html=True,
)

# 创建一个容器来居中内容
with st.container():
    st.markdown('<div class="container">', unsafe_allow_html=True)

    # 创建问答对话框
    question = st.text_input("请输入您的问题：", "")

    if st.button('提交'):
        if question.strip() == "":
            st.write("请输入一个问题！")
        else:
            # 这里可以加入你的逻辑处理问题和生成答案
            answer = f"您问的是：{question}。这是一个关于霹雳舞的问题。"
            st.write(answer)

    st.markdown('</div>', unsafe_allow_html=True)